<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>价格</th>
        <th>颜色</th>
    </tr>
</table>
<script>
  //实例化一个空对象
  let p1 = {};
  //JS中允许动态添加属性和方法(java不支持)
  p1.name="张三";
  p1.age=18;
  p1.run=function () {
    console.log(this.name+":"+this.age)
  }
  //调用方法
  p1.run();

  //实例化一个自带属性和方法的对象
  let p2={
    name :"李斯",
    age :30,
    run:function () {
      console.log(this.name+":"+this.age);
    }
  }
  //调用方法
  p2.run();

  //用对象封装一个商品的信息
  let product = {title:"斯伯丁篮球",price:108,color:"红色"};
  //用数组装多个对象 这样数组里面就有多个商品的信息了
  let arr = [{title:"斯伯丁篮球",price:108,color:"红色"},
      {title:"威尔逊篮球",price:158,color:"花色"},
      {title:"李宁篮球",price:98,color:"蓝色"}];
  //得到table
  let t = document.querySelector("table");
  //for循环遍历数组
  for (let p of arr) {
      //创建tr 和3个td
      let tr = document.createElement("tr");
      let titleTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let colorTd = document.createElement("td");
      //把当前遍历的商品中的数据填到td中
      titleTd.innerText = p.title;
      priceTd.innerText = p.price;
      colorTd.innerText = p.color;
      //把3个td装进tr
      tr.append(titleTd,priceTd,colorTd);
      //把tr装进table
      t.append(tr);
  }

</script>
</body>
</html>